<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/YBslider.css" />
	<link rel="stylesheet" href="css/kzt.css" />
	<link rel="stylesheet" href="css/jquery.nstSlider.css">
	<!-- <link rel="stylesheet" href="http://abpetkov.github.io/powerange/stylesheets/demo.css" /> -->
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/YBslider.js"></script>
	<script type="text/javascript"  src="js/page.js"></script>
	<script type="text/javascript" src="js/linkjs.js"></script>
</head>
<body style="min-height:900px">

	<div class="header">
		<div id="append"></div>
		<script> 
            $("#append").load("header.html");
        </script>

		<div class="navBigbox">
			<div class="navsubBox">
				<ul class="indexMenu">
					<li class="home-btn">首页</li>
					<li class="cp-btn">产品<a class="checked-arrow"></a></li>
					<li class="kf-btn">
						开发
						<!-- <ul class="subMenu">
			            	<li>开发前准备</li>
			                <li>开始开发</li>
			                <li>接口介绍</li>
			                
			            </ul> -->
					</li>
					<li class="kzt-btn">
						控制台 
						<!-- <ul class="subMenu">
			            	<li>企业信息</li>
			                <li>合同管理</li>
			                <li>充值记录查询</li>
			                
			            </ul> -->
					</li>
					<li class="Qos-btn">
						帮助与支持
						<!-- <ul class="subMenu">
			            	<li>常见问题</li>
			                <li>文档下载</li>
			                <li>问题反馈</li>
			                
			            </ul> -->
					</li>
				</ul>
			</div>
		</div>
		<div class="clear"></div>
	</div>
	<!--  -->
	<div class="contentBox">
		<h3>
			首页产品 &gt;<a style="color:#50b9e7">&nbsp;产品</a>
		</h3>
		<ul class="order-flowUl">
			<li class="tyll-btn">后向（通用）流量介绍</li>
			<!-- <li class="dxll-bt">后向（定向）流量介绍</li> -->
			
		</ul>
		<div class="clear"></div>
		<!--  -->
		<div class="order-flow-content tyll-Box" style="position:relative;float:left;width:1160px;z-index:2;top:-1px;">
			<div class="sliderBigBox">
				 <div class="container">

    <section class="content">
      <div class="box">
      <p class="llname">
      	选择金额：
      </p>
        <div class="example">
          <div class="slider-wrapper">
	        <div class="nstSlider nstSlider1" data-range_min="0" data-range_max="300" data-cur_min="0" data-cur_max="0">
	            <div class="bar bar0"></div>
	            <div class="leftGrip leftGrip0"></div>
	        </div>
	        <div class="math">
	            <input type="text" class="js-callback_1" onblur="fnOnblurMoney(this)" value="" />
	            <label class="display-box-label">万</label>
	        </div>
	        <!--<div class="leftLabel" />
	        <div class="rightLabel" />-->
	        <p class="nst-p">
	            <span class="nst-span nst-span1">
	                <em class="icon_circular"></em>
	                <a>5W</a>
	            </span>
	            <span class="nst-span nst-span2">
	                <em class="icon_circular"></em>
	                <a>50W</a>
	            </span>
	            <span class="nst-span nst-span3">
	                <em class="icon_circular"></em>
	                <a>100W</a>
	            </span>
	            <span class="nst-span nst-span4">
	                <em class="icon_circular"></em>
	                <a>200W</a>
	            </span>
	            <span class="nst-span nst-span5">
	                <em class="icon_circular"></em>
	                <a>300W</a>
	            </span>
	        </p> 
          </div>
        </div>
    </section>


    <section class="content">
      <div class="box">
      <p class="llname">
      	折合本地流量：
      </p>
        <div class="example">
          <div class="slider-wrapper">
	        <div class="nstSlider nstSlider2" data-range_min="0" data-range_max="600" data-cur_min="0" data-cur_max="0">
	            <div class="bar bar1"></div>
	            <div class="leftGrip leftGrip1"></div>
	        </div>
	        <div class="math">
	            <input type="text" class="js-callback_2" onblur="fnOnblurLocal(this)"/>
	            <label class="display-box-label">TB</label>
	        </div>
	        <!--<div class="leftLabel" />
	        <div class="rightLabel" />-->
	        <p class="nst-p">
	            <span class="nst-span nst-span1">
	                <em class="icon_circular"></em>
	                <a>10TB</a>
	            </span>
	            <span class="nst-span nst-span2">
	                <em class="icon_circular"></em>
	                <a>105TB</a>
	            </span>
	            <span class="nst-span nst-span3">
	                <em class="icon_circular"></em>
	                <a>200TB</a>
	            </span>
	            <span class="nst-span nst-span4">
	                <em class="icon_circular"></em>
	                <a>400TB</a>
	            </span>
	            <span class="nst-span nst-span5">
	                <em class="icon_circular"></em>
	                <a>600TB</a>
	            </span>
	        </p>
          </div>
        </div>
    </section>
	<h6 class="nst-h6">或</h6>

    <section class="content" style="margin-top:34px;">
      <div class="box">
      <p class="llname">
      	折合全国流量：
      </p>
        <div class="example">
          <div class="slider-wrapper">
	        <div class="nstSlider nstSlider3" data-range_min="0" data-range_max="900" data-cur_min="0" data-cur_max="0">
	            <div class="bar bar2"></div>
	            <div class="leftGrip leftGrip2"></div>
	        </div>
	        <div class="math">
	            <input type="text" class="js-callback_3" onblur="fnOnblurCountry(this)"/>
	            <label class="display-box-label">TB</label>
	        </div>
	        <!--<div class="leftLabel" />
	        <div class="rightLabel" />-->
	        <p class="nst-p">
	            <span class="nst-span nst-span1">
	                <em class="icon_circular"></em>
	                <a>15TB</a>
	            </span>
	            <span class="nst-span nst-span2">
	                <em class="icon_circular"></em>
	                <a>160TB</a>
	            </span>
	            <span class="nst-span nst-span3">
	                <em class="icon_circular"></em>
	                <a>300TB</a>
	            </span>
	            <span class="nst-span nst-span4">
	                <em class="icon_circular"></em>
	                <a>600TB</a>
	            </span>
	            <span class="nst-span nst-span5">
	                <em class="icon_circular"></em>
	                <a>900TB</a>
	            </span>
	        </p>
          </div>
          <p style="width:480px;position:relative;height:30px;margin:20px auto 0;">
	        <span style="color: #c5c7cc;font-size: 14px;">说明：本地和全国流量的单价按照合同金额相应打折，付款总金额内可以根据<br />
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;需求，自助选择使用多少本地流量和全国流量。</span>
	      </p> 
        </div>
    </section>

  </div>
		<div class="sliderBox-Btn">
			<p class="sliderBox-Btntit">开通方式：</p>
				<div class="slider-BoxSub-Btn">
					<button>WEB版</button>
					<button>API版</button>
					<p>合作方式使用个人电脑<br />登录上海电信流量业务WEB平台<br />人工单个或批量开通流量包</p>
					<p>合作方式使用服务器、固定IP<br />由技术人员和上海电信业务平台对接<br />即可完成流量包自动充值</p>
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<!--滑块 -->
		<div class="sliderRightBox">
			<h3>商品清单</h3>
			<ul style="overflow:hidden">
				<li><span>开通方式：</span><a>WEB版本</a></li>
				<li><span>对应本地流量单价：</span><a>0.05元/M</a></li>
				<li><span>对应漫游流量单价：</span><a>0.08元/M</a></li>
			</ul>

			<p>合约金额：</p>
			<span class="Flow-money">￥25,000</span>
			<button class="tjyxd-btn">提交订购意向</button>
			<h6>计算规则详情&gt;&gt;</h6>
			<div class="clear"></div>
		</div>	
	</div>
	<!-- 通用流量 -->
			</div>
    	</div>
    </div>
		
	</div>
	<div class="clear"></div>
	
	
	<!--  -->
	<div id="append-bot"></div>
	<script> 
        $("#append-bot").load("footer.html");
    </script>	
  <script src="js/jquery.nstSlider.min.js" type="text/javascript"></script>
  <script type="text/javascript">
//金额初始化
$('.nstSlider1').nstSlider({
    "crossable_handles": false,
    "left_grip_selector": ".leftGrip",
    "right_grip_selector": undefined,
    "value_bar_selector": ".bar",
    "value_changed_callback": function(cause, leftValue) {
		$('.js-callback_1').val(leftValue);
        $('.js-callback_2').val(leftValue * 2);
        $('.js-callback_3').val(leftValue * 3);
    },
    "user_mouseup_callback":function(vmin, vmax, left_grip_moved){
        var a =  $('.leftGrip0').css('left');
        var b = parseInt(a) + 36;
        $('.bar').css('width',b);
        $('.leftGrip').css('left',a);
    }
});
//本地流量初始化
/*$('.nstSlider2').nstSlider({
    "crossable_handles": false,
    "left_grip_selector": ".leftGrip",
    "right_grip_selector": undefined,
    "value_bar_selector": ".bar",
    "value_changed_callback": function(cause, leftValue) {
        $('.js-callback_2').val(leftValue);
        $('.js-callback_1').val(leftValue / 2);
    },
    "user_mouseup_callback":function(vmin, vmax, left_grip_moved){
        var a =  $('.leftGrip1').css('left');
        var b = parseInt(a) + 36;
        $('.bar0').css('width',b);
        $('.leftGrip0').css('left',a);
        $('.bar2').css('width',0);
        $('.leftGrip2').css('left',0);
        $('.js-callback_3').val(0);
    }
});*/
//全国流量初始化
/*$('.nstSlider3').nstSlider({
    "crossable_handles": false,
    "left_grip_selector": ".leftGrip",
    "right_grip_selector": undefined,
    "value_bar_selector": ".bar",
    "value_changed_callback": function(cause, leftValue) {
        $('.js-callback_3').val(leftValue);
        $('.js-callback_1').val(leftValue / 3);
    },
    "user_mouseup_callback":function(){
        var a =  $('.leftGrip2').css('left');
        var b = parseInt(a) + 36;
        $('.bar0').css('width',b);
        $('.leftGrip0').css('left',a);
        $('.bar1').css('width',0);
        $('.leftGrip1').css('left',0);
        $('.js-callback_2').val(0);
    }
});*/

//金额输入框失去焦点函数
function fnOnblurMoney(money){
    var mon = $('.js-callback_1').val();
	if(mon > 0){
		var a = mon / 300;
		var b = a * 444;
		var c = b + 18;
		var d = mon * 2;
		var e = mon * 3;
		if(mon <= 300){
			$('.bar').css('width',c);
			$('.leftGrip').css('left',b);
			$('.js-callback_2').val(d);
			$('.js-callback_3').val(e);
		}
	}
}
//本地流量输入框失去焦点函数
function fnOnblurLocal(money){
    var mon = $('.js-callback_2').val();
	if(mon > 0){
		var a = mon / 600;
		var b = a * 444;
		var c = b + 18;
		var d = mon / 2;
		if(mon <= 600){
			$('.bar0').css('width',c);
			$('.leftGrip0').css('left',b);
			$('.bar1').css('width',c);
			$('.leftGrip1').css('left',b);
			$('.bar2').css('width',0);
			$('.leftGrip2').css('left',0);
			$('.js-callback_1').val(d);
			$('.js-callback_3').val(0);
		}
	}
}
//全国流量输入框失去焦点函数
function fnOnblurCountry(money){
    var mon = $('.js-callback_3').val();
	if(mon > 0){
		var a = mon / 900;
		var b = a * 444;
		var c = b + 18;
		var d = mon / 3;
		if(mon <= 900){
			$('.bar0').css('width',c);
			$('.leftGrip0').css('left',b);
			$('.bar1').css('width',0);
			$('.leftGrip1').css('left',0);
			$('.bar2').css('width',c);
			$('.leftGrip2').css('left',b);
			$('.js-callback_1').val(d);
			$('.js-callback_2').val(0);
		}
	}
}
  
  </script>
</body>
</html>